<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <script src="../assets/echarts.min.js"></script>
    <title></title>
    <style>
        .refresh {
            position: fixed;
            right: 30px;
            top: 30px;
            width: 30px;
            height: 30px;
            background: white;
            border-radius: 5px;
            text-align: center;
            line-height: 30px;
            box-shadow: 0 0 3px 3px #ddd;
            animation:light 0.2s ease-in forwards;
        }
        .refresh img {
            width: 15px;
            height: 15px;
        }
        .refresh:hover {
            animation:dark 0.2s ease-in forwards;
        }
        @keyframes dark {from{background:#fff}to{background:#f6f6f6}}
        @keyframes light {from{background:#f6f6f6}to{background:#fff}}
    </style>
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-sm6 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body chart-card">
                    <div class="chart-header">
                        <div class="metawrap">
                            <div class="meta">
                                <span>用户人数</span>
                            </div>
                            <div id="user-size" class="total">-</div>
                        </div>
                    </div>
                    <div class="chart-body">
                        <div class="contentwrap">
                        </div>
                    </div>
                    <div class="chart-footer">
                        <div class="field">
                            <span>日注册量</span>
                            <span id="user-day">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body chart-card">
                    <div class="chart-header">
                        <div class="metawrap">
                            <div class="meta">
                                <span>快递员人数</span>
                            </div>
                            <div id="courier-size" class="total">-</div>
                        </div>
                    </div>
                    <div class="chart-body">
                        <div class="contentwrap">
                        </div>
                    </div>
                    <div class="chart-footer">
                        <div class="field">
                            <span>日注册量</span>
                            <span id="courier-day">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body chart-card">
                    <div class="chart-header">
                        <div class="metawrap">
                            <div class="meta">
                                <span>总快件数</span>
                            </div>
                            <div id="express-size" class="total">-</div>
                        </div>
                    </div>
                    <div class="chart-body">
                        <div class="contentwrap">
                        </div>
                    </div>
                    <div class="chart-footer">
                        <div class="field">
                            <span>日派单量</span>
                            <span id="express-day">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body chart-card">
                    <div class="chart-header">
                        <div class="metawrap">
                            <div class="meta">
                                <span>待取件数</span>
                            </div>
                            <div id="waiting-size" class="total">-</div>
                        </div>
                    </div>
                    <div class="chart-body">
                        <div class="contentwrap">
                        </div>
                    </div>
                    <div class="chart-footer">
                        <div class="field">
                            <span>新增数量</span>
                            <span id="waiting-day">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-sm12 layui-col-md12">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">实时快件区域分布图</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <iframe id="map" src="map.html" style="width:100%;height:600px;"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="refresh"><img src="../assets/font/refresh.png" alt=""></div>
<script src="../assets/layui.all.js"></script>
<script src="../js/qrcode/jquery2.1.4.js"></script>
<script>
    $(function () {
        var interval;
        var during = 5 * 60 * 1000;
        var map = document.getElementById('map');
        var refresh = function (index) {
            $.getJSON("/admin/views/console.do", null, function (data) {
                if (index) layer.close(index);
                if (data.data !== null) {
                    if (data.data[0].size === $("#express-size").text() &&
                        data.data[0].day === $("#express-day").text() &&
                        data.data[1].size === $("#waiting-size").text() &&
                        data.data[1].day === $("#waiting-day").text() &&
                        data.data[2].size === $("#user-size").text() &&
                        data.data[2].day === $("#user-day").text() &&
                        data.data[3].size === $("#courier-size").text() &&
                        data.data[3].day === $("#courier-day").text()) {
                        during *= 2;
                        clearInterval(interval);
                        interval = setInterval(refresh, during);
                    } else {
                        $("#express-size").text(data.data[0].size);
                        $("#express-day").text(data.data[0].day);
                        $("#waiting-size").text(data.data[1].size);
                        $("#waiting-day").text(data.data[1].day);
                        $("#user-size").text(data.data[2].size);
                        $("#user-day").text(data.data[2].day);
                        $("#courier-size").text(data.data[3].size);
                        $("#courier-day").text(data.data[3].day);
                        map.src = 'map.html?temp=' + Math.floor(Math.random() * 0xffffffff);
                        during = 5 * 60 * 1000;
                        clearInterval(interval);
                        interval = setInterval(refresh, during);
                    }
                } else {
                    layer.msg(data.message);
                }
            });
        };
        refresh();
        interval = setInterval(refresh, during);

        $('.refresh').click(function () {
            var load = layer.load();
            refresh(load);
        });
    });
</script>
</body>
</html>